/* 
    首页
    顶部banner    
*/
var n = 0;
var banlis
var imglis
var ban 
var banul 
var banimg


function auto() {
    n++;
    if (n == banlis.length) n = 0;
    for (var i = 0; i < banlis.length; i++) {
        banlis[i].className = '';
        // imglis[i].className = '';
        buffMove(imglis[i], {
            opacity: 0
        });
    }
    banlis[n].className = 'high';
    // imglis[n].className = 'active';
    buffMove(imglis[n], {
        opacity: 1
    });

}

function lunBoTu(){
    ban = document.getElementsByClassName('banner')[0];
    banul = ban.getElementsByClassName('list')[0];
    banimg = ban.getElementsByClassName('img')[0];
   
     banlis = banul.getElementsByTagName('li');
     imglis = banimg.getElementsByTagName('li');
    // console.log(banlis);
    banlis[0].className = 'high';
    imglis[0].className = 'active';

    // 轮播图
    ban.timer = setInterval(auto, 2000);
    // 划上停止
    banul.onmouseenter = function () {
        clearInterval(ban.timer);
    }

    // 划下开始
    banul.onmouseleave = function () {
        ban.timer = setInterval(auto, 2000);
    }

    // 划上每一个切换
    for (var j = 0; j < banlis.length; j++) {
        banlis[j].index = j;
        banlis[j].onmouseenter = function () {
            n = this.index - 1;
            auto();
        }
    }
}

window.onload = async function () {
    // var banner = $("#banner");
    var box = $(".img");
    var list = $(".list");
    // 渲染数据
    var newStr = "";
    var pagesStr = "";

    let data = await myAjax({ url: "http://localhost:3000/api/banners" });
    let bannerData = data.result.result;
    $(bannerData).each(function (index, item) {
      if (index === 0) {
        newStr += `<li class="active"><img src='${item.image_src}' alt=""></li>`;
        pagesStr += `<li class="high">${item.title}</li>`;
      } else {
        newStr += `<li><img src='${item.image_src}' alt=""></li>`;
        pagesStr += `<li>${item.title}</li>`;
      }
    });
    box.html(newStr);
    list.html(pagesStr);
    lunBoTu() //当请求ajax 拿到结果并追加到页面上以后 要调用此方法
    
    var fix = document.getElementsByClassName('fix')[0];
    // console.log(ban.offsetLeft);
    var cw = document.documentElement.clientWidth;
    if (cw > 1270) {
        fix.style.left = ban.offsetLeft + 1200 + 'px';
    } else {
        fix.style.left = auto;
        fix.style.right = 0;
    }
    // 返回顶部
    var top1 = fix.querySelector('.top');
    // console.log(top1);
    top1.onclick = function () {
        document.body.timer = setInterval(function () {
            document.documentElement.scrollTop -= 50;
            if (document.documentElement.scrollTop <= 0) {
                clearInterval(document.body.timer);
            }
        }, 1);
    }
   
    
}

U.addLoad(async function () {
    var onlineBox = $(".content ul").eq(0);
    var str = ''
    let data = await myAjax({ url: "http://localhost:3000/api/courseinfo" });
    let bannerData = data.result.result;
    console.log(bannerData);

    $(bannerData).each(function (index, item) {
      str += `<li>
                <div class="top">
                    <span class="rj">${item.type_name}</span>
                    <img src="${item.image_src}" alt="" class="m">
                    <p>学科：${item.subject_name}</p>
                </div>
                <div class="bottom">
                    <div class="left">
                        <span>${item.title}</span>
                        <span class="time">地区：${item.area_name}</span>
                    </div>
                    <div class="right">${item.price}元</div>
                </div>
            </li>`;
    });
    onlineBox.html(str);
})
U.addLoad(async function () {
    var goodsBox = $(".content ul").eq(1);
    var str = "";
    let data = await myAjax({ url: "http://localhost:3000/api/courseinfo?type=2" });
    let bannerData = data.result.result;
    console.log(bannerData);
  $(bannerData).each(function (index, item) {
    str += `<li>
                <div class="top">
                    <span class="rj">${item.type_name}</span>
                    <img src="${item.image_src}" alt="" class="m">
                    <p>学科：${item.subject_name}</p>
                </div>
                <div class="bottom">
                    <div class="left">
                        <span>${item.title}</span>
                        <span class="time">地区：${item.area_name}</span>
                    </div>
                    <div class="right">${item.price}元</div>
                </div>
            </li>`;
  });
  goodsBox.html(str);
});
